<template>
  <div class="poi">
    <el-row style="height: 80px">
      <el-input
        v-model="search"
        class="i-searchtext"
        type="text"
        clearable
        placeholder="请输入地名地址"
        @keyup.native.enter="onSearch"
      >
        <el-button slot="append" icon="el-icon-search" @click="onSearch" />
      </el-input>
    </el-row>
    <el-row v-show="hasresult" style="height: calc(100% - 160px);overflow: hidden">
      <el-scrollbar class="page-component__scroll">
        <List :list-data="poiData" @onLocate="onLocate" />
      </el-scrollbar>
    </el-row>
    <el-row v-show="hasresult" class="el-pages-row">
      <el-pagination
        :page-size="50"
        :page-count="5"
        :total="total"
        layout="total,sizes,prev, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
import List from "@/components/List";
import { poiList, poiAddress } from "@/api/poi";
import { mapState } from "vuex";
export default {
  name: "Poi",
  components: {
    List
  },
  data() {
    return {
      search: "",
      total: 0,
      poiData: [],
      currentPage: 1,
      pageSize: 50,
      hasresult: false
    };
  },
  methods: {
    /**
     * 翻页
     * @param val
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.requestPoiData();
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.requestPoiData();
    },
    // 查询
    onSearch() {
      this.requestPoiData();
    },

    // 清除
    onClear() {
      this.mapService.removeMarker();
    },
    /**
     * 请求数据
     */
    requestPoiData() {
      poiList({
        keyWord: this.search,
        pageIndex: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        if (res.data.data.length > 0) {
          this.hasresult = true;
        }
        this.total = res.data.tatol;
        this.poiData = res.data.data;
        if (this.total === 0) {
          this.$message({
            type: "info",
            message: "没有数据!"
          });
        }
      });
    },

    // 定位
    onLocate(item) {
      poiAddress({
        _id: item.id
      }).then(async res => {
        const mapModuleIndex = this.mapModuleIndex;
        const maps = await this.mapService.getMap();
        switch (mapModuleIndex) {
          case 0:
          case 2:
            this.mapService.addMarker([
              parseFloat(res.data.gpsx),
              parseFloat(res.data.gpsy)
            ]);
            this.mapService.flyTo({
              type: "Point",
              coordinates: [res.data.gpsx, res.data.gpsy]
            });
            if (this.sceneViewer) {
              if (this.sceneViewer.entities.getById("position")) {
                this.sceneViewer.entities.removeById("position");
              }

              const positions = Cesium.Cartographic.fromDegrees(
                res.data.gpsx,
                res.data.gpsy
              );

              const promise = Cesium.sampleTerrain(
                this.sceneViewer.terrainProvider,
                13,
                [positions]
              );

              Cesium.when(promise, updatedPositions => {
                const terrainHeight = updatedPositions[0].height;
                this.sceneViewer.entities.add({
                  id: "position",
                  position: Cesium.Cartesian3.fromDegrees(
                    res.data.gpsx,
                    res.data.gpsy,
                    terrainHeight + 10
                  ),
                  billboard: {
                    image: "/static/img/milSearch/location.png",
                    verticalOrigin: Cesium.VerticalOrigin.TOP
                  }
                });
              });
            }
            break;
          case 1:
            if (this.sceneViewer.entities.getById("position")) {
              this.sceneViewer.entities.removeById("position");
            }

            const positionsa = Cesium.Cartographic.fromDegrees(
              res.data.gpsx,
              res.data.gpsy
            );

            const promisea = Cesium.sampleTerrain(
              this.sceneViewer.terrainProvider,
              13,
              [positionsa]
            );

            Cesium.when(promisea, updatedPositions => {
              const terrainHeight = updatedPositions[0].height;
              this.sceneViewer.entities.add({
                id: "position",
                position: Cesium.Cartesian3.fromDegrees(
                  res.data.gpsx,
                  res.data.gpsy,
                  terrainHeight + 10
                ),
                billboard: {
                  image: "/static/img/milSearch/location.png",
                  verticalOrigin: Cesium.VerticalOrigin.TOP
                }
              });
            });

            this.sceneViewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(
                res.data.gpsx,
                res.data.gpsy,
                2000
              ),
              duration: 3,
              orientation: {
                heading: 6.283185307179586,
                pitch: -1.5707963267948966,
                roll: 0
              }
            });

            break;
        }
      });
    }
  },
  computed: {
    ...mapState({
      mapService(state) {
        return state.eswyzt.mapService;
      },

      sceneViewer(state) {
        return state.eswyzt.sceneViewer;
      },
      // 地图模块控件
      mapModuleIndex(state) {
        return state.eswyzt.mapModuleIndex;
      }
    })
  }
};
</script>

<style>
.page-component__scroll {
  height: 100%;
}
.page-component__scroll .el-scrollbar__wrap {
  overflow-x: auto;
}
.el-pages-row .el-pagination button {
  margin-top: 15px;
  color: white;
  background-color: transparent;
}
.el-pages-row .el-pagination span {
  line-height: 60px !important;
  color: white;
}

.i-searchtext .el-input__inner {
  background: transparent;
  border: 1px solid #1c81be;
  color: white;
}
.i-searchtext .el-input-group__append {
  background-color: transparent;
  border-top: 1px solid #1c81be;
  border-right: 1px solid #1c81be;
  border-bottom: 1px solid #1c81be;
}
.i-searchtext .el-input-group__append .el-button--default {
  color: white;
}
.el-pages-row .el-pagination .el-input__inner {
  background-color: transparent;
  border: 1px solid #1c81be;
  color: white;
}
</style>

<style scoped>
.poi {
  height: 100%;
  overflow: hidden;
}

.i-searchtext {
  margin: 20px;
  width: 295px;
}

.el-pages-row {
  text-align: center;
}
</style>
